<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
    <title>MeterSphere</title>
    <style>
        .gi-1x {
            font-size: 24px;
        }

        a {
            text-decoration: none;
            color: rgb(44, 42, 72);
        }

        a:link {
            text-decoration: none;
            color: rgb(44, 42, 72);
        }

        a:active {
            text-decoration: none;
            color: rgb(44, 42, 72);
        }

        a:visited {
            text-decoration: none;
            color: rgb(44, 42, 72);
        }

        a:hover {
            text-decoration: none;
            color: rgb(44, 42, 72);
        }

        .header-top {
            width: 100%;
            height: 40px;
            padding: 0 10px;
            background-color: rgb(44, 42, 72);
            color: rgb(245, 245, 245);
            font-size: 14px;
            vertical-align: middle;
        }

        .logo {
            width: 40px;
            display: inline-block;
            background-size: 40px 40px;
            height: 40px;
            background-repeat: no-repeat;
            background-position: 50% center;
            background-image: url("icon/favicon-w.png");
            float: left;
        }

        .options {
            border-top: #E9E9E9 solid 1px;
            padding: 10px 0;
        }

        .options a {
            margin-bottom: 20px;
            font-weight: bold;
        }

        .options a[aria-expanded=true] i {
            transform: rotate(90deg);
        }

        #options {
            background-color: #f4f8fe;
        }

    </style>
</head>
<body>
<div class="header-top">
    <a class="logo" href="https://github.com/metersphere/chrome-extensions" target="_blank"></a>
    <span style="height: 40px;font-size: 18px;display: inline-block;padding-top: 7px;">MeterSphere JMX Recorder</span>
</div>
<div style="width: 305px;padding: 10px 10px 0 10px;">
    <div class="container" id="main_page" style="height: 85px">
        <div class="text-center">
            <div class="row text-center" style="margin-bottom: 10px">
                <input type="text" id="jmx_name" class="form-control" placeholder="脚本名称" aria-label="脚本名称"
                       aria-describedby="basic-addon1">
            </div>
            <div class="row">
                <a href="#" id="record_start" style="display: none">
                    <span class="glyphicon glyphicon-play-circle gi-1x" data-toggle="tooltip" data-placement="right"
                          title="录制"></span>
                </a>
                <a href="#" id="record_pause" style="display: none">
                    <span class="glyphicon glyphicon-pause gi-1x" data-toggle="tooltip" data-placement="right"
                          title="暂停"></span>
                </a>
                <a href="#" id="record_resume" style="display: none">
                    <span class="glyphicon glyphicon-record gi-1x" data-toggle="tooltip" data-placement="right"
                          title="恢复"></span>
                </a>
                <a href="#" id="record_stop" style="display: none">
                    <span class="glyphicon glyphicon-stop gi-1x" data-toggle="tooltip" data-placement="right"
                          title="停止"></span>
                </a>

                <a href="#" id="record_download" style="display: none;margin-left: 5px">
                    <span class="glyphicon glyphicon-saved gi-1x" data-toggle="tooltip" data-placement="right"
                          title="保存"></span>
                </a>
                <a href="#" id="record_edit" style="display: none;margin-left: 5px">
                    <span class="glyphicon glyphicon-edit gi-1x" data-toggle="tooltip" data-placement="right"
                          title="编辑"></span>
                </a>
            </div>
        </div>
    </div>
    <div id="main_download" style="display: none;">
        <div id="checkboxs" style="margin-bottom: 10px;margin-top: 10px;"></div>
        <div style="text-align: center;margin-bottom: 5px">
            <a href="#" id="record_back">
                <span class="glyphicon glyphicon-chevron-left gi-1x" data-toggle="tooltip" data-placement="right"
                      title="返回"></span>
            </a>
            <a href="#" id="record_save" style="padding-left: 5px">
                <span class="glyphicon  glyphicon-download-alt gi-1x" data-toggle="tooltip" data-placement="right"
                      title="下载"></span>
            </a>
        </div>
    </div>
    <div class="options">
        <a data-toggle="collapse" href="#options" aria-expanded="false" aria-controls="options">
            <i class="glyphicon glyphicon-triangle-right"></i>
            高级选项
        </a>
        <div class="collapse" id="options">
            录制内容:
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="options" id="record_ajax">
                    Http Request
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="options" id="cookie">
                    Cookie
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="options" id="record_css">
                    Css
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="options" id="record_js">
                    JS
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="options" id="record_images">
                    Images
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="options" id="record_other">
                    Other
                </label>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/JMX.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
